<template>
  <div>
    <!-- el-card 卡片组件带阴影 -->
    <el-card shadow="always">
      <!-- 头部是面包屑导航组件 -->
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主体是表单组件 -->
      <el-form label-width="80px">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <!-- 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部 -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <!-- 频道组件(全局组件) -->
          <GeekChannel v-model="reqParams.channel_id" />
        </el-form-item>
        <el-form-item label="日期：">
          <!-- 日期选择器  type="daterange" 范围选择 -->
          <el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterArticles()">筛选</el-button>
          {{ reqParams }}
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 筛选结果 -->
    <el-card shadow="always" style="margin-top: 20px">
      <div slot="header">
        <p>根据筛选条件共查询到 {{ total }} 条结果：</p>
      </div>
      <!-- 表格 -->
      <el-table :data="articleList">
        <!-- 封面 标题 状态 发布时间 阅读数 评论数 点赞数 操作 -->
        <el-table-column label="封面">
          <!-- slot-scope="scope" 作用域插槽 -->
          <template slot-scope="scope">
            <!-- <img :src="scope.row.cover.images[0]" style="width: 100px; height: 100px" /> -->
            <!-- <p>{{ scope.row.cover.images[0] }}</p> -->

            <!-- scope.row 相当于 循环时的 item 项目 -->
            <!-- el-image 支持 preview-src-list 大图预览，fit 属性设置图片不变形 -->
            <el-image :src="scope.row.cover.images[0]" :preview-src-list="scope.row.cover.images"
              style="width: 100px; height: 100px" fit="cover">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="200"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <!-- 多个条件用 v-if 和 v-else-if 分支判断，实现条件渲染 -->
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="danger">审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate" width="200"></el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- circle 圆形按钮 plain 朴素按钮 -->
            <el-button @click="$router.push(`/publish/${scope.row.id}`)" type="primary" icon="el-icon-edit" circle
              plain></el-button>
            <el-button @click="deleteArticle(scope.row.id)" type="danger" icon="el-icon-delete" circle
              plain></el-button>
            <!-- 作用域插槽中提取出 id 备用 -->
            {{ scope.row.id }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件，layout 分页布局，子组件名用逗号分隔，其他属性鼠标悬停看效果 -->
      <el-pagination style="margin-top: 20px;" :total="total" :page-sizes="[2, 5, 10, 20]"
        :page-size.sync="reqParams.per_page" :current-page.sync="reqParams.page" @current-change="getArticleList()"
        @size-change="getArticleList()" layout="total, sizes, prev, pager, next, jumper" />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleView',
  data () {
    return {
      // 提交给后台的参数
      reqParams: {
        // axios 会自动过滤掉 null / undefined 的值
        status: null, // 文章状态
        channel_id: null, // 频道ID
        begin_pubdate: null, // 开始时间
        end_pubdate: null, // 截止时间
        page: 1, // 当前页码
        per_page: 2 // 页容量
      },
      // 日期数组(用于前端收集)
      dateArr: [],
      // 文章列表(用于表格渲染)
      articleList: [],
      // 文章总数(用于分页组件渲染)
      total: 0
    }
  },
  // 侦听器
  watch: {
    // 侦听日期数组变化
    dateArr: {
      // 深度侦听
      deep: true,
      // 侦听的对象变化时触发 handler 回调函数
      handler (value) {
        // 如果 value 为 null，表示清空了日期，清空 开始时间 和 截止时间
        if (value === null) {
          this.reqParams.begin_pubdate = null
          this.reqParams.end_pubdate = null
        } else {
          // 获取日期数组，分别赋值给 开始时间 和 截止时间
          this.reqParams.begin_pubdate = value[0]
          this.reqParams.end_pubdate = value[1]
        }
      }
    }
  },
  created () {
    // 调用-获取文章列表
    this.getArticleList()
  },
  methods: {
    // 封装-获取文章列表
    async getArticleList () {
      const res = await this.$http.get('/v1_0/mp/articles', { params: this.reqParams })
      console.log(res)
      // 保存文章列表
      this.articleList = res.data.data.results
      // 保存文章总数
      this.total = res.data.data.total_count
    },
    // 通过表单筛选文章
    filterArticles () {
      // 重置页码为 1
      this.reqParams.page = 1
      // 重新发送请求获取文章列表
      this.getArticleList()
    },
    // 删除文章
    deleteArticle (id) {
      // MessageBox 弹框，删除操作需二次确认
      this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 注意：这里必须添加 await 等待删除请求结束，再获取文章列表
        await this.$http.delete(`/v1_0/mp/articles/${id}`)
        // 重新获取文章列表（刷新表格）
        this.getArticleList()
        // 删除成功轻提示
        this.$message.success('删除成功!')
      }).catch(() => {
        // 用户点击取消时触发，但是不能省略 catch，否则控制台会报错
      })
    }
  }
}
</script>

<style>
.image-slot {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}
</style>
